import './articleClassComponents.less';

import React, { useEffect } from 'react';

import {
  Link,
  useDispatch,
  useSelector,
} from 'umi';

import _ from '@umijs/deps/compiled/lodash';

import { ArticleClassType } from '../../types/modules/article';

interface Props { }

function ArticleClassComponents(props: Props) {
  const { } = props
  let dispatch = useDispatch()
  useEffect(() => {
    dispatch({
      type: "article/getArticleClass"
    })
  }, [])
  let { articleClass } = useSelector((state: { article: ArticleClassType }) => state.article)
  let ind = (index: number) => {
    localStorage.setItem('ind', JSON.stringify(index+1))
  }
  return (
    <div className='articleClass'>
      <h4 className='articleClass-h4'>
        推荐阅读
      </h4>
      <ul className='articleClass-ul'>
        {
          articleClass && articleClass.map((item: ArticleClassType, index: number) => {
            return <Link to={`/category/${item.value}`} onClick={ind.bind(_, index)} className='articleClass-Link' id='articleClass-Link' key={item.id}> <span className='articleClass-Link-span'>{item.label}</span> <span className='articleClass-Link-span'>共计{item.articleCount}篇文章</span></Link>
          })
        }
      </ul>
    </div>
  )
}

export default ArticleClassComponents
